<!-- 头部总积分组件 -->
<template>
	<view class="integral">
		<view class="credits">
			<text class="text-1">{{ $t('交易总额') }}</text>
			<text class="text-2">{{ points }}</text>
			<text class="text-3">
				<text style="margin-right: 17rpx;">{{ $t('退款总额') }}</text>
			</text>
			<text class="text-4">
				<text style="margin-right: 125rpx;">{{ this_month }}</text>
			</text>
			<image class="icon" :src='serverImageUrl("/static/newStyleIcon/gold.png")' mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		props: {
			points: {
				default: 0,
			},
			this_month: {
				default: 0,
			}
		},
		methods: {}
	}
</script>

<style lang="scss" scoped>
	.integral {
		height: 287rpx;
		// background-image: url($my-bg-url +  '20231101/4088564162f99b8302e6ceabf230ee50.png');
		background: linear-gradient(111deg, #F8EDCE 29%, #F6D39B 99%);
		background-size: cover;
		// border: 1px dashed #cccccc;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding-left: 31rpx;
	}

	.gain {
		width: 180rpx;
		min-height: 45rpx;
		word-break: break-all;
		background: rgba(255, 255, 255, .46);
		border-radius: 14rpx 0rpx 0rpx 14rpx;
		float: right;
		margin-top: 24rpx;
		text-align: center;

		text {
			font-size: 24rpx;

			font-weight: 400;
			color: #73674D;
			line-height: 45rpx;
		}
	}

	.credits {
		margin-top: 29rpx;
		float: left;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		font-weight: 400;
		color: #73674D;
		height: 221rpx;
		position: relative;
		width: 100%;
		
		.icon {
			width: 350rpx;
			position: absolute;
			right: -30rpx;
			top: -90rpx;
		}

		.text-1 {
			font-size: 30rpx;

			line-height: 35rpx;
		}

		.text-2 {
			font-size: 63rpx;
			font-family: Impact;
			line-height: 77rpx;
			letter-spacing: 1px;
			font-size: 46rpx;
		}

		.text-3 {
			font-size: 30rpx;
			line-height: 35rpx;
		}

		.text-4 {
			font-size: 46rpx;
			font-family: Impact;
			line-height: 49rpx;
		}
	}
</style>